<!--
 * @Author: your name
 * @Date: 2021-08-16 10:46:56
 * @LastEditTime: 2021-08-18 18:02:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\components\header\Header.vue
-->
<template>
  <div id="header">
    <el-container>
      <el-header style="padding: 0">
        <el-row
          type="flex"
          justify="center"
          align="middle"
          class="header-container"
        >
          <el-col :span="5" class="user-icon">
            <el-button
              size="small"
              type="success"
              icon="el-icon-user-solid"
              circle
            ></el-button>
            <div>
              <h4 class="user-name">用户名：{{username}}</h4>
              <h4 class="user-id">用户ID：{{userId}}</h4>
            </div>
          </el-col>
          <el-col :span="15">
            <h1 class="header-title">订餐管理系统</h1>
          </el-col>
          <el-col :span="4">
            <el-button class="btn-bgc">
              <i class="el-icon-user"></i>
              <span>账户设置</span>
            </el-button>
            <el-button class="btn-bgc" @click="loginOut">
              <i class="el-icon-lock"></i>
              <span>退出</span>
            </el-button>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username:'',//用户名
      userId:'',//用户编码
    }
  },
  methods: {
    loginOut() {
      let uid = sessionStorage.getItem("uid");
        this.$message({
          type: "info",
          message: "退出成功",
          duration: "500",
        });
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("uid");
        sessionStorage.removeItem("menuIndex")
        this.$router.push("/login");
    },
  },
  created(){
    this.username=sessionStorage.getItem('username');//设置用户名
    this.userId=sessionStorage.getItem('uid');//设置用户id
  }
};
</script>

<style lang='less' scoped>
.header-container {
  height: 6rem;
  background-color: #192e5b;
  & > .user-icon {
    padding-left: 2rem;
    display: flex;
    align-items: center;
    & .user-name,
    .user-id {
      // display: inline-block;
      font-size: 1rem;
      padding-left: 1rem;
      color: #72a2c0;
      cursor: pointer;
    }
  }
  & .header-title {
    font-size: 2.5rem;
    color: #72a2c0;
  }
  & .btn-bgc {
    background-color: #192e5b;
    font-size: 1rem;
    padding: 0.5rem;
    color: #2990ff;
    border: none;
  }
}
</style>